<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../../s/element-ui/2.13.2/theme-chalk/index.css">
<title>ColorPicker 颜色选择器</title>
</head>
<body>
	<div id="app">

		<h3>有默认值</h3>
		<el-color-picker v-model="color1"></el-color-picker>

		<h3>无默认值</h3>
		<el-color-picker v-model="color2"></el-color-picker>

		<h3>选择透明度</h3>
		<el-color-picker v-model="color3" show-alpha></el-color-picker>

		<h3>预定义颜色</h3>
		<el-color-picker v-model="color4" show-alpha :predefine="predefineColors"> </el-color-picker>

	</div>
	<script src="../../s/vue/2.7.16/vue.min.js"></script>
	<script src="../../s/element-ui/2.13.2/index.js"></script>
	<script>
		new Vue({
			el : '#app',
			data : function() {
				return {
					color1 : '#409EFF',
					color2 : null,
					color3 : 'rgba(19, 206, 102, 0.8)',
					color4 : 'rgba(255, 69, 0, 0.68)',
					predefineColors : [ //
					'#ff4500', //
					'#ff8c00', //
					'#ffd700',// 
					'#90ee90', //
					'#00ced1', //
					'#1e90ff',//
					'#c71585', //
					'rgba(255, 69, 0, 0.68)', //
					'rgb(255, 120, 0)', //
					'hsv(51, 100, 98)', //
					'hsva(120, 40, 94, 0.5)',//
					'hsl(181, 100%, 37%)',//
					'hsla(209, 100%, 56%, 0.73)', //
					'#c7158577' //
					]
				};
			},
			methods : {}
		})
	</script>
</body>
</html>